<template>
	<view class="OrderList" :class="{ 'pof' : loading }">
		<!-- 		<view class="orderList">
			<view class="search-top box-sizing dis"
				:style="{ paddingTop: `${getSystemInfo().statusBarTop}rpx`, height: `${getSystemInfo().statusBarHeight}rpx` }">
				<text class="font-weight-600 color-f size-36">订单</text>
			</view> -->
		<!-- </view> -->
		<!-- 加油站订单 -->
		<!-- 		<view class="station-order">
			<view class="station-for f-background ">
				<view class="station-title dis-cen border-bottom">
					<view class="font-weight-600 color3 size-36 dis-ali">
						温江交通加油站<text class="iconfont icon-a-lujing4332biankuang size-20"></text>
					</view>
					<view class="font-weight-400 size-28">已支付</view>
				</view>
				<view class="station-goods border-bottom">
					<u--image width="124rpx" height="124rpx" radius="8rpx"
						src="https://cdn.uviewui.com/uview/album/1.jpg">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
					<view class="station-zhi font-weight-400 flex">
						<view class="color-6 size-32">95# 28.83L</view>
						<view class="dis-cen">
							<text class="color-6 size-32">金额：¥300</text>
							<text class="color3 size-32">
								实付：<text class="size-28 color font-weight-600">¥</text>
								<text class="size-44 color font-weight-600">243</text>
							</text>
						</view>
					</view>
				</view>
				<view class="items">2024-07-21 12:33:23</view>
			</view>
		</view> -->
		<!-- 骨架 -->
		<view class="skeleton-style order" v-if="loading && tokenBool" :style="{ paddingTop: `110rpx` }">
			<view class="give-for margin-top-20 f-background" v-for="(item,index) in 10" :key="index">
				<u-skeleton :title="false" :rowsWidth="['142rpx','356rpx','410rpx']"
					:rowsHeight="['34rpx','34rpx','26rpx']" rows="3" :loading="loading"></u-skeleton>
			</view>
		</view>
		<!-- 服务 -->
		<!-- <view class="order" v-if="current == 0"> -->
		<view class="tabs">
			<view class="dis por size-36 color-5" v-for="(item,index) in orderTabs" :key="index"
				@click="current = index">
				<view :class="{'font-weight-600 color0':current == index}">{{item.name}}</view>
				<view class="tabs-title poa background" v-if="current == index"></view>
			</view>
		</view>
		<mescroll-body @init="mescrollInit" @down="$event=>$event.resetUpScroll(false)"
			@up="$event=> postGetOrderList($event.num)" :toTop="{width: '100px',height: '100px'}" :down="{auto: false}"
			:up="{auto: true, textNoMore: '— 仅显示最近一年的订单 —',empty:{use:false}}" v-if="current == 0">
			<view class="default" v-if="!list.length && !loading || !tokenBool || current != 0"
				:style="{ paddingTop: `${getSystemInfo().statusBarHeight*1+122}rpx` }">
				<Default :tisName="!tokenBool ? '你还未登录，无法查看订单':'暂无相关订单数据！'" :uButtonBool="!tokenBool ? true : false" />
			</view>
			<view class="order" v-if="current==0">
				<view class="give-for margin-top-20 f-background" v-for="(item,index) in list" :key="index">
					<view class="give-img">
						<image class="width-height100" :src="orderType[item.deliveryType*1].icon" mode=""></image>
					</view>
					<view class="service">
						<view class="service-title border-bottom dis-cen">
							<text class="font-weight-600 color0 size-34">{{orderType[item.deliveryType*1].name}}</text>
							<text class="font-weight-400 size-32"
								:style="{color: listProxy[item.orderStatus].color}">{{listProxy[item.orderStatus].name}}</text>
						</view>
						<navigator :url="`/packageOrder/details/substitute?id=${item.orderId}`" hover-class="none"
							class="service-zhen">
							<view class="font-weight-600 color3 size-34 margin-bottom-24"
								v-if="item.deliveryType == 2 && item.purchases.bodyText">
								{{item.purchases.bodyText}}
							</view>
							<scroll-view class="scroll-view margin-bottom-24" scroll-x
								v-if="item.deliveryType == 2 && item.purchases.imgs.length">
								<u--image width="120rpx" height="120rpx" radius="12rpx" :src="itema"
									v-for="(itema,inz) in item.purchases.imgs" :key="inz">
									<view slot="error" style="font-size: 24rpx;">加载失败</view>
								</u--image>
							</scroll-view>
							<view class="dis-cen" v-if="item.deliveryType == 3">
								<scroll-view class="scroll-view_H margin-bottom-24" scroll-x>
									<u--image width="120rpx" height="120rpx" radius="12rpx" :src="items.goodsUrl"
										v-for="(items,indexs) in item.goodsDelivery.goodsDetailList" :key="indexs">
										<view slot="error" style="font-size: 24rpx;">加载失败</view>
									</u--image>
								</scroll-view>
								<view class="font-weight-400 color3 size-30">共{{item.goodsDelivery.count || 0}}件</view>
							</view>
							<view class="font-weight-600 color3 size-34 margin-bottom-24"
								v-if="item.deliveryType*1 == 1">
								{{item.addrType == 2 ? item.addressInfo : item.communityName}}
								<text v-if="item.houseNumber">-{{item.houseNumber}}</text>
							</view>
							<view class="font-weight-400 color9 size-26">下单时间：{{item.createTime}}</view>
						</navigator>
						<view class="seize" v-if="item.deliveryType == 1"></view>
						<view class="operate dis-cen" v-if="item.deliveryType != 1">
							<view class="font-weight-400 size-28">
								<text class="color9" v-if="[2,3].includes(item.deliveryType*1)">结算金额</text>
								<text class="color3 margin-left-12" v-if="item.deliveryType*1 == 2">小票为准</text>
								<text class="color margin-left-12 size-40" v-if="item.deliveryType*1 == 3">
									<text class="size-30">¥</text> {{item.goodsDelivery.payableAmount || 0}}
								</text>
							</view>
							<u-button type="primary"
								:customStyle="{width: '160rpx',height: '62rpx',borderRadius: '22rpx',margin: 0,padding: 0,borderRadius: '10rpx',border: '1px solid #E0E0E0'}"
								color="#ffffff" @click="onOrderNow" v-if="[1,6].includes(item.orderStatus)">
								<text class="color-5 font-weight-400 size-28">再来一单</text>
							</u-button>
						</view>
					</view>
					<!-- </view> -->
				</view>
			</view>
			<!-- <navigator :url="`/packageOrder/details/substitute?id=${item.orderId}`" hover-class="none"
					class="order-for radius26 f-background margin-bottom-16" v-for="(item,index) in list" :key="index">
					<view class="order-cen dis-cen border-bottom">
						<view class="order-dis dis-ali">
							<image class="order-img margin-right-12" src="@/static/icons/dqukd.png" mode="widthFix">
							</image>
							<text
								class="font-weight-600 color2 size-32">{{item.deliveryType == 1 ? '代取快递' : '代买商品'}}</text>
						</view>
						<view class="font-weight-400 size-28" :style="{color: listProxy[item.orderStatus].color}">
							{{listProxy[item.orderStatus].name}}
						</view>
					</view>
					<view class="order-name">
						<view class="font-weight-400 color6 size-32 name">
							{{item.communityName}}-
							<text v-if="item.building">{{item.building}}栋</text>
							<text v-if="item.unit">{{item.unit}}单元</text>
							<text v-if="item.number">{{item.number}}号</text>
							<text v-if="item.addressInfo">{{item.addressInfo}}号</text>
						</view>
						<view class="dis-cen">
							<text class="font-weight-400 color9 size-28">{{item.createTime}}</text>
							<text class="font-weight-400 color3 size-28">{{item.deliveryCount}}个包裹</text>
						</view>
					</view>
				</navigator> -->
		</mescroll-body>
		<view class="default" v-if="!loading && current != 0"
			:style="{ paddingTop: `${getSystemInfo().statusBarHeight*1+122}rpx` }">
			<Default :tisName="!tokenBool ? '你还未登录，无法查看订单':'暂无相关订单数据！'" :uButtonBool="!tokenBool ? true : false" />
		</view>
		<!-- </view> -->
		<!-- 商品 -->
		<!-- 		<view class="good-order" v-else-if="current == 1 && list.length">
			<view class="order-for radius26 f-background margin-bottom-16" v-for="(item,index) in 10" :key="index">
				<view class="order-cen border-bottom" :class="{'order-index':index==0}">
					<view class="dis-cen width100 font-weight-400 size-28 margin-bottom-24">
						<text class="color9">2024-07-21 12:33:23</text>
						<view :style="{color: product[index].color}">{{product[index].name}}</view>
					</view>
					<view class="single" v-if="index == 0">
						<u--image width="152rpx" height="152rpx" radius="8rpx"
							src="https://cdn.uviewui.com/uview/album/1.jpg">
							<view slot="error" class="size-24">加载失败</view>
						</u--image>
						<view class="goods between">
							<view class="name">
								<view class="box2 font-weight-500 color3 size-32">商品名称，这里展示商品名称，标题很长的情况</view>
								<text>x3</text>
							</view>
							<text class="color font-weight-600 size-40 price-font">
								<text class="size-28">¥</text>5.98
							</text>
						</view>
					</view>
					<scroll-view class="scroll-view" scroll-x v-else>
						<view class="scroll-img" :class="{'scroll-img16':inx != 0}" v-for="(itmx,inx) in 10" :key="inx">
							<u--image width="152rpx" height="152rpx" radius="8rpx"
								src="https://cdn.uviewui.com/uview/album/1.jpg">
								<view slot="error" class="size-24">加载失败</view>
							</u--image>
						</view>
					</scroll-view>
				</view>
				<view class="order-name" :class="{'order-index':index==0}">
					<text class="font-weight-400 color3 size-28">共3件，应付</text>
					<text class="color font-weight-600 size-40 price-font">
						<text class="size-28">¥</text>5.98
					</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { getSystemInfo } from '@/utils/index';
	import { activeOrder, inactiveOrder } from "@/utils/style/tabs"
	import { listProxy, product } from "@/utils/enumeration/index"
	import Default from "@/components/default/default"
	import { GetOrderList } from "@/api/index"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { Default },
		data() {
			return {
				listProxy, // 枚举
				product,
				current: 0,
				orderTabs: [
					{ name: "跑腿服务", type: 1 },
					{ name: "消费买单", type: 3 },
					{ name: "代金券", type: 3 },
				],
				orderType: { // 0=全部 1=快递到家 2=代买商品 3=自营商品 4=加油
					1: { name: '代取快递', icon: require('@/static/icons/dqkd.png') },
					3: { name: '自营超市', icon: require('@/static/icons/zycs.png') },
					2: { name: '代买商品', icon: require('@/static/icons/dmsp.png') }
				},
				loading: true,
				activeOrder,
				inactiveOrder,
				scrollTop: 0,
				list: [],
				tokenBool: '',
				params: {
					size: 10, // 	每页显示条数
					current: 1, // 当前页
					dataBean: {
						type: 1, // 類型 1.快递 2.商品
					}
				}
			}
		},
		onShow() {
			this.tokenBool = uni.getStorageSync('userInfo').mobile
			if (uni.getStorageSync('orderIndex')) {
				this.current = uni.getStorageSync('orderIndex') * 1 - 1
				uni.removeStorageSync('orderIndex');
			}
			if (!this.tokenBool) return
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页
			this.canReset && this.mescroll.scrollTo(0, 0) // 滚动条也重置到顶部
			this.canReset = true // 过滤第一次的onShow事件
			// this.postGetOrderList()
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			getSystemInfo,
			onSwitch(e) {
				this.current = e.index
				if ([1, 2].includes(e.index)) {
					this.list = []
					return
				}
				this.postGetOrderList()
			},
			onOrderNow() {
				uni.switchTab({
					url: "/pages/pages/index"
				});
			},
			// 列表数据
			async postGetOrderList(page) {
				// this.pageUp.num = page || 1
				this.params.current = this.mescroll.num
				const { code, data } = await GetOrderList(this.params)
				const _this = this
				if (code == "200") {
					console.log('data', data)
					this.list = this.mescroll.num == 1 ? data.records : this.list.concat(data.records); //追加新数据
					setTimeout(() => {
						_this.loading = false
						_this.mescroll.endByPage(data.records.length, data.total); //必传参数(当前页的数据个数, 总页数)
					}, 500)
				}
			}
		}
	}
</script>

<style lang="scss">
	.OrderList {
		// .default{
		width: 100%;
		// }
		padding-bottom: 20rpx;

		.skeleton-style {
			padding: 0;
			// 	height: 81vh!important;
		}

		// ::v-deep.orderList {
		// 	width: 100%;
		// 	// height: 278rpx;
		// 	background: linear-gradient(180deg, #FF0000 0%, #FF636E 100%);
		// 	position: sticky;
		// 	top: 0;
		// 	z-index: 100;
		// 	// .vue-ref-in-for {
		// 	// 	width: 33.33%;
		// 	// 	padding: 0;

		// 	// }
		// 顶部导航
		.tabs {
			position: fixed;
			top: -1rpx;
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 33.33%);
			text-align: center;
			height: 100rpx;
			color: rgba(255, 255, 255, 0.90);
			background: #FFFFFF;
			z-index: 1000;

			.tabs-title {
				width: 132rpx;
				height: 8rpx;
				bottom: 0;
				left: 50%;
				margin-left: -66rpx;
			}
		}

		// .u-tabs__wrapper__nav__line {
		// 	bottom: 10rpx !important;
		// }
		// }

		// 服务订单
		.order {
			margin-top: 120rpx;

			.give-for {
				border-radius: 18rpx;
				display: grid;
				grid-template-columns: 56rpx 1fr;
				grid-gap: 24rpx;
				padding: 30rpx 30rpx 24rpx;

				.give-img {
					width: 56rpx;
					height: 56rpx;
				}

				.service {
					.service-title {
						padding: 12rpx 0 32rpx;
					}

					::v-deep.scroll-view {
						white-space: nowrap;
						width: 610rpx;

						.vue-ref {
							display: inline-block;
							margin-right: 20rpx;
						}
					}

					::v-deep.scroll-view_H {
						white-space: nowrap;
						width: 520rpx;

						.vue-ref {
							display: inline-block;
							margin-right: 20rpx;
						}
					}

					.service-zhen {
						padding-top: 30rpx;
					}
				}
			}

			.seize {
				width: 100%;
				height: 34rpx;
			}

			.operate {
				height: 62rpx;
				line-height: 62rpx;
				margin-top: 32rpx;
			}
		}

		// .order {
		// 	padding: 16rpx;
		// 	// margin-top: -40rpx;

		// 	.order-for {
		// 		.order-img {
		// 			width: 44rpx;
		// 			height: 39.6rpx;
		// 		}
		// 	}

		// 	.order-cen {
		// 		padding: 30rpx 24rpx 30rpx 28rpx;
		// 	}

		// 	.order-name {
		// 		padding: 36rpx 24rpx;

		// 		.name {
		// 			margin-bottom: 20rpx;
		// 		}
		// 	}
		// }

		// 商品订单
		.good-order {
			padding: 16rpx;

			.order-cen {
				padding: 32rpx 24rpx 24rpx;

				.scroll-view {
					white-space: nowrap;
				}

				.scroll-img {
					display: inline-block;
				}

				.scroll-img16 {
					margin-left: 16rpx;
				}
			}

			.order-name {
				text-align: right;
				padding: 24rpx 28rpx;

				.font-weight-600 {
					position: relative;
					top: 1rpx;
					margin-left: 6rpx;
				}
			}

			.single {
				display: grid;
				grid-template-columns: 152rpx 1fr;
				grid-gap: 0rpx 24rpx;

				.name {
					display: flex;
					justify-content: space-between;

					.box2 {
						width: 388rpx;
					}
				}
			}

			.goods {
				padding: 8rpx 0;
			}

			.order-index {
				padding-left: 16rpx;
				padding-right: 16rpx;
			}
		}

		// 加油订单
		.station-order {
			padding: 16rpx;

			.station-for {
				border-radius: 24rpx;

				.station-title {
					padding: 36rpx 24rpx;

					.icon-a-lujing4332biankuang {
						margin-left: 8rpx;
					}
				}

				.station-goods {
					padding: 28rpx 24rpx;
					display: grid;
					grid-template-columns: 124rpx 1fr;
					gap: 20rpx;
				}

				.station-zhi {
					padding: 16rpx 0 14rpx;
					flex-direction: column;
					justify-content: space-between;
				}

				.items {
					padding: 24rpx 24rpx 28rpx;
				}
			}
		}
	}
</style>